//下拉菜单功能
class Pullmenu {
    constructor() {
        $('.xl').hover(function () {
            $(this).next().stop().animate({
                height: "220px"
            })
        }, function () {
            $(this).next().stop().animate({
                height: "0"
            })
        })
        // 
        $(".xl").next().hover(function () {
            $(this).stop().animate({
                height: "220px"
            })
        }, function () {
            $(this).stop().animate({
                height: "0"
            })
        })
    }
}
new Pullmenu()

//三级菜单的功能实现
class Threemenu {
    constructor() {
        $(".menu").find("li").hover(function () {
            $(this).children(".menu2").stop().show()
                .find("span").hover(function () {
                    $(this).addClass("active")
                }, function () {
                    $(this).removeClass("active")
                })
        }, function () {
            $(this).children(".menu2").stop().hide()
        });
        $(".menu").find(".small").children("a").hover(function () {
            $(this).css({
                color: "tomato"
            })
        }, function () {
            $(this).css({
                color: ""
            })
        })
    }
}

//动态渲染三级菜单数据
class Menu {
    constructor() {
        //这些元素得获取 用jquery更方便   
        this.l1 = document.querySelector(".l1")
        this.menu1 = this.l1.querySelector(".menu2")
        this.l2 = document.querySelector(".l2")
        this.menu2 = this.l2.querySelector(".menu2")

        this.init()
    }
    init() {
        this.load()
    }
    load() {
        $.ajax({
            url: "http://localhost:3000/api/list/list3",
            success: (res) => {
                // console.log(res);
                // this.res1 = JSON.parse(res);
                this.res1 = res.data;
                console.log(this.res1);
                this.render(this.res1, this.menu1)
            }
        })
        $.ajax({
            url: "http://localhost:3000/api/list/list4",
            success: (res) => {
                // console.log(res);
                // this.res2 = JSON.parse(res);
                this.res=res.data
                this.render(this.res2, this.menu2)
            }
        })

    }
    //三级菜单的渲染 双层for循环渲染  ******************************
    //传进参数 使得每一个三级菜单都可以使用   代码优化 
    render(a, b) {
        let str = ""
        let str2 = ""
        //先循环图片的描述信息(每个菜单的数量的相同)
        for (let i = 0; i < a.length; i++) {
            //再循环每个产品的可选规格(每个产品的可选规格数量不一样 得单独循环渲染)
            for (let j = 0; j < a[i].arr.length; j++) {
                str2 += `<a href="javascript::">${a[i].arr[j]}</a> `
            }
            str += `  <div class="menu3">
            <a class="a1" href="javascript::">
                <img alt="" width="60" height="60"
                    src="${a[i].img}">
                <span>${a[i].info}</span>
            </a>
            <div class="small">${str2}</div>
        </div>`
            str2 = ""
        }
        b.innerHTML = str
        //添加三级菜单功能
        new Threemenu()
    }
}
new Menu()



//轮播图
class Banner {
    constructor() {
        this.imgObj = document.querySelector(".banner")
        this.imglis = this.imgObj.querySelectorAll("img")
        this.dot = document.querySelector(".dot")
        this.init();
        this.index = 0;
        this.nextIndex = 0;
    }
    init() {
        //循环创建小圆点
        this.creatDot()
        //点击小圆点切换
        this.addDot()
        //自动播放
        this.autoPlay()
    }
    creatDot() {
        let str = ""
        for (let i = 0; i < this.imglis.length; i++) {
            str += `<a  href="javascript::"></a>`
        }
        this.dot.innerHTML = str;
        this.dot.children[0].classList.add('show2')
    }
    //点击圆点图片变化
    addDot() {
        let that = this
        $(".dot").children("a").click(function () {
            clearInterval(that.timer)
            that.index = that.nextIndex;
            that.nextIndex = $(this).index()
            that.change()
        })
    }
    //自动播放
    autoPlay() {
        this.times = setInterval(() => {
            this.index = this.nextIndex
            this.nextIndex++
            if (this.nextIndex === this.imglis.length) this.nextIndex = 0
            // console.log(this.index, this.nextIndex);
            this.change();
        }, 3000)
    }
    change() {
        this.imglis[this.index].classList.remove('show1') // 去除
        this.imglis[this.nextIndex].classList.add('show1') // 添加
        this.dot.children[this.index].classList.remove('show2')
        this.dot.children[this.nextIndex].classList.add('show2')
    }
}
new Banner()


//动态渲染图片数据
class Pic {
    constructor() {
        this.box = document.querySelector(".bottom")
        this.main1 = document.querySelector(".main1")
        this.bigBox = this.main1.querySelector(".left")
        this.init()
    }
    init() {
        this.load()
    }
    //请求数据
    load() {
        $.ajax({
            url: "http://localhost:3000/api/list/list",
            success: (res) => {
                this.res1 =res.data;
                this.render()
            }
        })
    };
    //渲染八张小图片数据
    render() {
        //右边八张小图片的渲染
        let str = ""
        //渲染的时候给a设置herf  直接跳转到详情页  并且通过location传递id
        //target="view_window"  跳转到一个新页面
        for (let i = 0; i < this.res1.length - 1; i++) {
            str += `<div class="goods">
                <div class="img">
                    <a href="info.html?${this.res1[i].id}"  target="view_window" ><img  alt=""
                        src="${this.res1[i].img}" data-id="${this.res1[i].id}"
                         class="add"></a>
             </div>
                    <div class="info">
                        <h1><a href="javascript::">${this.res1[i].info1}</a></h1>
                        <p>${this.res1[i].info2}</p>
                        <h3>${this.res1[i].price}</h3>
                    </div>
                </div>`
        }
        this.box.innerHTML = str
        //左边一张大图的渲染   直接写在一个json文件中就可  不需要重复写json
        var str2 = ` <div class="top">
        <p>F1 游戏区</p>
        <a href="javascript::"></a>
    </div>
    <a href="info.html?${this.res1[this.res1.length - 1].id}"  target="view_window"><img class="add" alt="" width="226" height="630"
            src="${this.res1[this.res1.length - 1].img1}" data-id="${this.res1[this.res1.length - 1].id}"  ></a>`
        this.bigBox.innerHTML = str2
    }
}
new Pic()

//点击登录以后 刷新页面改变登录注册样式
class LoginRegistration {
    constructor() {

        let userMsg = sessionStorage.getItem("userMsg") ? JSON.parse(sessionStorage.getItem("userMsg")) : {};
        if (userMsg.state == 1) {
            let str = `<a href="./load.html">${userMsg.username}</a>
                    <span>|</span>
                     <a class="exit" href="javascript::">退出</a>`
            $(".load").html(str)
            $(".exit").click(function () {
                sessionStorage.removeItem("userMsg");
                let str = `<a href="./load.html">登录</a>`
                $(".load").html(str)
            })
        } else {
            let str = `<a href="./load.html">登录</a>`
            $(".load").html(str)
        }
        //判断  只有登录以后才可以点击购物车
        $(".cart").click(function () {
            if (userMsg.state == 1) {
                location.href = "cart.html"
            } else {
                location.href = "load.html"
            }
        })

    }
}
new LoginRegistration()




